<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Login Page</title>
    <link rel="stylesheet" type="text/css" href="./css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="./css/scanboardLogin.css"/>
    <link rel="stylesheet" type="text/css" href="./css/animsition.css"/>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery.animsition.js"></script>
    <script src="./js/particles.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/global.js"></script>
</head>
<body>
<div class="wp animsition">
    <div id="loginApp" class="boardLogin">
        <div class="logo ">
            Student MS 系统
        </div>
        <form>
            <div class="inpGroup">
                <span class="loginIco1"></span>
                <input type="text" v-model="username" placeholder="请输入您的学工号">
            </div>
            <div class="prompt">
                <p class="error">用户名错误或不存在</p>
            </div>

            <div class="inpGroup">
                <span class="loginIco2"></span>
                <input type="password" v-model="password" @keyup.enter="login()" placeholder="请输入您的密码">
            </div>
            <div class="prompt">
                <p class="success">输入正确</p>
            </div>

            <!-- <button class="submit">登录</button> -->
            <a href="#" @click.prevent="login()" class="animsition-link submit">登录</a>
        </form>
    </div>
</div>
<div id="particles-js"></div>
</body>
<script type="text/javascript">
    layui.use(['layer'], function () {
        let layer = layui.layer

        new Vue({
            el: '#loginApp',
            data: {
                username: '',
                password: ''
            },
            methods: {
                async login() {
                    if (this.username == '' || this.password == '') {
                        layer.msg('用户名和密码不能为空', {icon: 2, anim: 6,})
                        return
                    }
                    layer.load()
                    let {data: person, code} = (await axios.get(api.person.login, {
                        params: {
                            jobNo: this.username,
                            password: this.password
                        }
                    })).data
                    if (code != 0 || !person) {
                        layer.closeAll()
                        layer.msg('账号或密码错误', {icon: 2, anim: 6})
                        return
                    }
                    layer.msg('登录成功', {icon: 1, anim: 2,shade:0.3})
                    setTimeout(() => {
                        localWareHouse.set('curPerson', person)
                        window.location.href = '//localhost:8080/index.html'
                    }, 1000)
                }
            }
        })
    })


    particlesJS('particles-js', {
            "particles": {
                "number": {
                    "value": 40,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": "#ffffff"
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    },
                    "image": {
                        "src": "img/github.svg",
                        "width": 100,
                        "height": 100
                    }
                },
                "opacity": {
                    "value": 0.5,
                    "random": false,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 5,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#ffffff",
                    "opacity": 0.4,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 3,
                    "direction": "none",
                    "random": false,
                    "straight": false,
                    "out_mode": "out",
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": true,
                        "mode": "repulse"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 400,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true,
            "config_demo": {
                "hide_card": false,
                "background_color": "#b61924",
                "background_image": "",
                "background_position": "50% 50%",
                "background_repeat": "no-repeat",
                "background_size": "cover"
            }
        }
    );
    $(".animsition").animsition({
        inClass: 'fade-in',
        outClass: 'fade-out',
        inDuration: 800,
        outDuration: 1000,
        linkElement: '.animsition-link',

        loading: false,
        loadingParentElement: 'body',
        loadingClass: 'animsition-loading',
        unSupportCss: ['animation-duration',
            '-webkit-animation-duration',
            '-o-animation-duration'
        ],


        overlay: false,

        overlayClass: 'animsition-overlay-slide',
        overlayParentElement: 'body'
    });
</script>
</html>
